<template>
  <div class="allboxs" :style="{ 'margin-top': list.length ? '10px' : '0' }">
    <div
      class="boxitems click"
      v-for="(item, index) in list"
      :key="index"
      @click="toUserDetailCommunity(item)"
    >
      <div class="boxtops f-j-sb-a-c">
        <div class="infolefts f-a-c">
          <div class="boxlefs">
            <img :src="userKey ? item[userKey].user_avatar : item.user_avatar" alt="" />
          </div>
          <div class="boxinfos">
            <div class="infoitems">
              <span>{{ userKey ? item[userKey].user_name : item.user_name }}</span>
            </div>
            <div class="infocontents f-a-c">
              <span>粉丝:{{ userKey ? item[userKey].like_count : item.like_count }}</span>
              <span
                >关注:{{
                  userKey ? item[userKey].follow_user_count : item.follow_user_count
                }}</span
              >
            </div>
          </div>
        </div>
        <div
          class="noguanzhus click f-j-a-c"
          @click.stop="gofollowNow(item)"
          v-if="showFollowBtn"
        >
          {{ item.is_follow_user ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="boxcontents ellipsis2">
        {{ userKey ? item[userKey].user_introduce : item.user_introduce }}
      </div>
    </div>
  </div>

  <!-- 无数据展示 -->
  <div class="no-data-box" v-if="!list.length">
    <noData></noData>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, reactive, toRefs, getCurrentInstance } from "vue";

import { followNow } from "@/axios/community.js";

import { ElMessage } from "element-plus";

export default defineComponent({
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    userKey: {
      type: String,
      default: "",
    },
    showFollowBtn: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let data = reactive({});
    // 关注以及取消关注
    let gofollowNow = (item) => {
      followNow({ posts_user_id: item.id }).then((res) => {
        ElMessage.success("关注成功");
        item.is_follow_user = !item.is_follow_user;
      });
    };

    // 用户头像点击 前往用户详情
    let toUserDetailCommunity = (item) => {
      router.push({
        path: "/pages/user/user",
        query: {
          id: item.user_follow_id,
        },
      });
    };
    return {
      toUserDetailCommunity,
      gofollowNow,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.allboxs {
  display: grid;
  grid-template-columns: repeat(auto-fill, 32.6%);
  grid-gap: 10px;
  // margin-top: 10px;
}
.boxitems {
  padding: 20px;
  width: 100%;
  height: 154px;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  .boxtops {
    align-items: flex-start;
    .boxlefs {
      width: 54px;
      height: 54px;
      > img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }
    .boxinfos {
      margin-left: 10px;
      .infoitems {
        > span {
          font-size: 16px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #000000;
        }
      }
      .infocontents {
        margin-top: 8px;
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          display: block;
          min-width: 60px;
          // &:last-child {
          // margin-left: 30px;
          // }
        }
      }
    }
    .guanzhus {
      width: 60px;
      height: 26px;
      background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
    }
    .noguanzhus {
      width: 60px;
      height: 26px;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      border: 1px solid #ececec;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000;
    }
  }
  .boxcontents {
    margin-top: 20px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
    height: 40px;
    line-height: 20px;
  }
}

.no-data-box {
  background: #ffffff;
  border-radius: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
</style>
